import React from 'react';
import PureRenderMixin from 'react-addons-pure-render-mixin'
import { Form, Row, Col, Input, Button, Icon } from 'antd';
import 'antd/dist/antd.css';

const FormItem = Form.Item;



class PCIndex extends React.Component{
  constructor(props, context) {
    super(props, context);
    this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
    this.state = {
      expand: false,
      labelCtx: [
        '提货单号',
        '商品名称',
        '商家名称',
        '交货日期'
      ]
    }
  }

handleSearch(e) {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      console.log('Received values of form: ', values);
    });
  }

  handleReset() {
    this.props.form.resetFields();
  }



  // To generate mock Form.Item
  getFields() {
    const count = this.state.expand ? 10 : 6;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 5 },
      wrapperCol: { span: 19 },
    };
    const children = [];
    for (let i = 0; i < 4; i++) {
      children.push(
        <Col span={12} key={i} style={{ display: i < count ? 'block' : 'none' }}>
          <FormItem {...formItemLayout} label={`${this.state.labelCtx[i]}`}>
            {getFieldDecorator(`field-${i}`)(
              <Input placeholder="请输入内容" />
            )}
          </FormItem>
        </Col>
      );
    }
    return children;
  }

  render(){
    return (
      <div class="pcHeader">
        <Row>
          <div class="head">
            <h2>商品提货</h2>
          </div>
        </Row>
        <Form
          className="ant-advanced-search-form"
          onSubmit={this.handleSearch.bind(this)}>
          <Row gutter={40}>{this.getFields()}</Row>
          <Row>
            <Col span={4}></Col>
            <Col span={20} style={{ textAlign: 'left' }}>
              <Button type="primary" htmlType="submit">查询</Button>
              <Button style={{ marginLeft: 8 }} onClick={this.handleReset.bind(this)}>
                清空
              </Button>
            </Col>
          </Row>
        </Form>
      </div>
    )

  }
}



export default Form.create()(PCIndex);
